<template>
	<!-- <scroll-view scroll-y="true" style="height: 100%;" @scrolltolower="$emit('scrolltolower')" @scroll="scroll"> -->
	
		<view class="video-list">
			<block v-for="(item,index) in videoList" :key="index">
				<view v-if="item" class="video-item">
					<view class="video">
						<view class="video-bg" @tap="$emit('onVideo',item)">
							<image class="videos" :src="item.picurl" mode="widthFix"></image>
						</view>		
					</view>
					<view class="recording-time">{{item.time}}</view>
				</view>
			</block>
		</view>
		<!-- <view v-show="videoList.length>=15" class="load-more">{{loading}}</view> -->
	
	<!-- </scroll-view> -->
</template>

<script>
	
	export default{
		components: {
			
		},
		props:{
			videoList: {
				type: Array
			},
			loading:{
				type:String
			}
		},
		data() {
			return {
				
			}
		},
		created() {
			console.log(this.videoList);
		},
		updated() {
			console.log(this.videoList);
		},
		methods: {
			upper(){
				console.log('下拉');
			},
			scroll(){
				
			}
		}
	}
</script>

<style scoped lang="less">
/deep/ .uni-video-cover-duration{
	font-size: 0;
}
.video-list{
	display: flex;
	flex-wrap:wrap;
	width:100%;
	// height: 100%;
	// padding:40rpx 40rpx 0 40rpx;
	padding:40rpx 40rpx 0 72rpx;
	box-sizing: border-box;
	.video-item{
		box-sizing: border-box;
		// width: 492rpx;
		// height: 310rpx;
		width: 16.667vw;
		height: 20.27vh;
		// margin: 0 64rpx 56rpx 0;
		margin: 0 2.22vw 56rpx 0;
		&:nth-child(5n){
			margin-right: 0;
		}
		.video{
			position: relative;
			width: 100%;
			// height: 252rpx;
			height: 16.47vh;
			box-sizing: border-box;
			font-size: 30rpx;
			color: #FFFFFF;
			border-radius: 20rpx;
			// margin-bottom: 20rpx;
			margin-bottom: 1.31vh;
			.video-bg{
				width: 100%;
				height: 100%;
				background: #000000;
				border-radius: 20rpx;
				position: relative;
				.videos{
					position: absolute;
					left: 0;
					top: 0;
					width: 100%;
					height: 100% !important;
				}
			}
		}
		.recording-time{
			display: flex;
			justify-content: flex-start;
			align-items: center;
			font-size: 36rpx;
			color: #515151;
		}
	}
}
.load-more{
	text-align: center;
	color: #AAAAAA;
	padding: 10upx;
}
</style>
